<template>
  <!-- 报表页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="数 据 报 表 管 理">
      <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 主体部分 -->
    <div class="main">
      <!-- 左侧导航栏 -->
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item title="月度报表" />
          <van-sidebar-item title="年度报表" />
          <van-sidebar-item title="其他报表" />
        </van-sidebar>
      </div>

      <!-- 右侧图表区域 -->
      <div class="right">
        <div class="app-container">
          <div class="the-container">
            <!--对div节点设置样式-->
            <div id="myChart" style="width: 100%; height: 100%" />
          </div>
        </div>
        <!-- <div class="lll">2<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />22<br />2</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Report",

  data() {
    return {
      activeKey: 0,
      BarIndex: 1,
      myChart: null, //图表实例
      xDatas: ["1月", "4月", "7月", "10月", "12月"],
      jyDatas: [25, 40, 36, 28, 30], //图表就医人数数据
      zyDatas: [22, 38, 32, 23, 29], //图表治愈人数数据
      YJYDatas: [25, 40, 36, 28, 30], //月就医人数
      YZYDatas: [22, 38, 32, 23, 29], //月治愈人数
      NJYDatas: [359, 402, 458, 512], //年就医人数
      NZYDatas: [320, 389, 420, 498], //年治愈人数
    };
  },

  mounted() {
    this.drawLine();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    //导航栏点击
    onChange(index) {
      this.BarIndex = index;
      console.log(this.BarIndex);
      if (this.BarIndex == 0) {
        this.xDatas = ["1月", "4月", "7月", "10月", "12月"];
        this.jyDatas = this.YJYDatas;
        this.zyDatas = this.YZYDatas;
        this.drawLine();
      } else if (this.BarIndex == 1) {
        this.xDatas = ["2018年", "2019年", "2020年", "2021年"];
        this.jyDatas = this.NJYDatas;
        this.zyDatas = this.NZYDatas;
        this.drawLine();
      }
    },
    drawLine() {
      //判断之前是否实例化图表，若有则销毁
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //销毁
      }
      // 初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      this.myChart.setOption({
        // 标题
        //title: { text: "数据展示" },
        // 提示框组件
        tooltip: {},
        legend: {
          data: ["就医人数", "治愈人数"],
        },
        // x轴
        xAxis: {
          type: "category",
          data: this.xDatas,
        },
        // y轴
        yAxis: {
          type: "value",
          name: "人数",
        },
        // 系列，用于管理数据
        series: [
          //就医人数
          {
            // 图例的名字
            name: "就医人数",
            // 图像类型
            type: "line",
            // 数值
            data: this.jyDatas,
            //数据提示
            itemStyle: {
              normal: {
                label: { position: "top", show: true, color: "blue" },
              },
            },
          },
          //治愈人数
          {
            name: "治愈人数",
            type: "line",
            data: this.zyDatas,
            itemStyle: {
              normal: {
                label: { position: "bottom", show: true },
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  .van-sidebar {
    width: 45px;
    height: 100%;
  }
  .left{
    height: 450px;
  }
  .right{
    -webkit-overflow-scrolling:touch;
    height: 1000px;
    overflow-y:scroll
  }
}

.the-container {
  height: 400px;
  background-color: #fff;
  padding: 20px 0 0 10px;
}
/* #myChart {
  width: 300px;
  height: 300px;
} */
.right {
  flex: 1;
}
</style>